<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="VanWest.Web.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headerContent" runat="server">
    <script src="scripts/tabbedContent.js" type="text/javascript"></script>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> 
    <script type="text/javascript">
            var image1 = new Image()
            image1.src = "images/people1.jpg"
            var image2 = new Image()
            image2.src = "images/people2.jpg"
            var image3 = new Image()
            image3.src = "images/people3.jpg"
            var image4 = new Image()
            image4.src = "images/people4.jpg"
            var image5 = new Image()
            image5.src = "images/people5.jpg"
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="bodyContent_Slideshow" runat="server">
    <div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="images/cut7.jpg" class="image_slideshow" alt="" /></a>
            <a href="#"><img src="images/cut6.jpg" class="image_slideshow" alt="" /></a>
            <a href="#"><img src="images/cut1.jpg" class="image_slideshow" alt="" /></a>
            <a href="#"><img src="images/cut2.jpg" class="image_slideshow" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {

        //Set Default State of each portfolio piece
        $(".paging").show();
        $(".paging a:first").addClass("active");

        //Get size of images, how many there are, then determin the size of the image reel.
        var imageWidth = $(".window").width();
        var imageSum = $(".image_reel img").size();
        var imageReelWidth = imageWidth * imageSum;

        //Adjust the image reel to its new size
        $(".image_reel").css({ 'width': imageReelWidth });

        //Paging + Slider Function
        rotate = function () {
            var triggerID = $active.attr("rel") - 1; //Get number of times to slide
            var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

            $(".paging a").removeClass('active'); //Remove all active class
            $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

            //Slider Animation
            $(".image_reel").animate({
                left: -image_reelPosition
            }, 500);

        };

        //Rotation + Timing Event
        rotateSwitch = function () {
            play = setInterval(function () { //Set timer - this will repeat itself every 3 seconds
                $active = $('.paging a.active').next();
                if ($active.length === 0) { //If paging reaches the end...
                    $active = $('.paging a:first'); //go back to first
                }
                rotate(); //Trigger the paging and slider function
            }, 6000); //Timer speed in milliseconds (3 seconds)
        };

        rotateSwitch(); //Run function on launch

        //On Hover
        $(".image_reel a").hover(function () {
            clearInterval(play); //Stop the rotation
        }, function () {
            rotateSwitch(); //Resume rotation
        });

        //On Click
        $(".paging a").click(function () {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });

    });

</script>

    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" runat="server">
  <div class="content_center_up">
        <div class="content_window">
            <h1>
                <a href="Programs.aspx">
                    CAMPUSES
                </a>
            </h1>
            <div class="content_window_img_container">
                <a href="Programs.aspx">
                    <img class="content_window_img" src="images/cut_4.jpg" />
                </a>
            </div>
            <div class="content_window_content_container">
                <p class="Text">
                    <font color="red">Vancouver/Kelowna</font><br />
                    It is <a href="Programs_General_English.aspx">general english</a>...
                </p>
            </div>
            <div class="button_link">
                <a href="Programs_General_English.aspx"><span>Read more</span></a>
            </div>
        </div>

        <div class="content_window">
            <h1>
                <a href="Programs_IELTS.aspx">
                    WHAT WE OFFER
                </a>
            </h1>
            <div class="content_window_img_container">
                <a href="Programs_General_English.aspx">
                    <img class="content_window_img" src="images/cut_2.jpg" />
                </a>
            </div>
            <div class="content_window_content_container">
                <p class="Text">
                    <font color="red">ESL/IELTS/CAMBRIDGE</font><br />
                    It is <a href="Programs_General_English.aspx">general english</a>...
                </p>
            </div>
            <div class="button_link">
                <a><span>Read more</span></a>
            </div>
        </div>

        <div class="content_window">
            <h1>
                <a href="">
                    DO YOU KNOW?
                </a>
            </h1>
            <div class="content_window_img_container">
                <a href="Programs_General_English.aspx">
                    <img class="content_window_img" src="images/cut_5.jpg" />
                </a>
            </div>
            <div class="content_window_content_container">
                <p class="Text">
                    <font color="red">ESL/IELTS/CAMBRIDGE</font><br />
                    It is <a href="Programs_General_English.aspx">general english</a>...
                </p>
            </div>
            <div class="button_link">
                <a><span>Read more</span></a>
            </div>
        </div>
  </div>
  <div class="content_center_down">
        <div class="content_center_down_left">
            <h1>NATIONALITY</h1>
            <h2>Vancouver Campus</h2>
            <p class="Text">Asia 30%</p>
            <p class="Text">Mid_East 30%</p>
            <p class="Text">South-America 20%</p>
            <p class="Text">Europe 20%</p>
            <h2>Kelowna Campus</h2>
            <p class="Text">Asia</p>
            <p class="Text">Mid_East</p>
            <p class="Text">South-America</p>
            <p class="Text">Africa</p>
        </div>
        <%--<div class="content_center_down_right">
            <h1>TESTIMONIAL</h1>
            <div class="tabbed_content">
					<div class="tabs">
						<div class="moving_bg">
							&nbsp;
						</div>
						<span class="tab_item">
							<a>Yatao</a>
						</span>
						<span class="tab_item">
							<a>Gary</a>
						</span>
						<span class="tab_item">
							<a>Pei</a>
						</span>
						<span class="tab_item">
							<a>Gary_Pei</a>
						</span>
					</div>
					
					<div class="slide_content">						
						<div class="tabslider">
							<ul>
                                <div class="img_frame">
                                    <img src="images/yataopei.jpg" alt="yataopei"/>
                                </div>
                                "In Vanwest College .... what i learn is be happy and learn english fun. it is located just in downtown, amazing environment"
							</ul>
							<ul>
								<div class="img_frame">
                                    <img src="images/yataopei.jpg" alt="yataopei"/>
                                </div>
                                "In Vanwest College .... what i learn is be happy and learn english fun. it is located just in downtown, amazing environment"
							</ul>
							<ul>
								<div class="img_frame">
                                    <img src="images/yataopei.jpg" alt="yataopei"/>
                                </div>
                                "In Vanwest College .... what i learn is be happy and learn english fun. it is located just in downtown, amazing environment"
							</ul>
							<ul>
								<div class="img_frame">
                                    <img src="images/yataopei.jpg" alt="yataopei"/>
                                </div>
                                "In Vanwest College .... what i learn is be happy and learn english fun. it is located just in downtown, amazing environment"
							</ul>
						</div>
						<br style="clear: both">
					</div>
			</div>
         </div>--%>  
  </div>
</asp:Content>
  

